{% extends 'users/user-base.html' %}

{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/layui/css/modules/layer/skin/layer.css' %}">
    <style>
        body {
            position: relative;
            background-image: url('/static/images/login2.jpg') !important;
            background-position: 0 0;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="login-box" style="margin: 7% 70%;">
        <div class="login-logo">
            <a href="#"><b>登 陆</b></a>
        </div>
        <!-- /.login-logo -->
        <div class="login-box-body">
            {#            <p class="login-box-msg">Sign in to start your session</p>#}

            <form action="{% url 'login' %}" method="post" id="addForm" onsubmit="return get_mac_hmac();">
                {% csrf_token %}

                {% if login_form.non_field_errors %}
                    <div class="alert alert-danger" role="alert">
                        {% for error in login_form.non_field_errors %}
                            <p{% if forloop.last %} class="mb-0"{% endif %}>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}

                <input type="hidden" name="mac" value="" id='mac'>
                <input type="hidden" name="hmac" value="" id='hmac'>

                <div class="form-group has-feedback">
                    <input type="text" name="mobile" class="form-control" placeholder="请输入用户名">
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                    <span class="form-text text-muted">{{ login_form.errors.mobile.0 }}</span>

                </div>
                <div class="form-group has-feedback">
                    <input type="password" name="password" class="form-control" placeholder="请输入密码">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                    <span class="form-text text-muted">{{ login_form.errors.password.0 }}</span>

                </div>

                <div class="input-group has-feedback" style="margin-top: 16px; margin-bottom: 16px;">
                    <input type="text" name="image_code" class="form-control" placeholder="验证码"
                           style="width: 96%;">

                    <div class="input-group-btn" onclick="generateImageCode();">
                        <img id="image-code" src="" style="width: 180px;height: 50px;">
                    </div>
                </div>
                <div class="row">
                    {#                    <div class="col-xs-8">#}
                    {#                        <div class="checkbox icheck">#}
                    {#                            <label>#}
                    {#                                <input type="checkbox"> 记住我#}
                    {#                            </label>#}
                    {#                        </div>#}
                    {#                    </div>#}
                    <!-- /.col -->
                    <div class="col-xs-4 pull-right">
                        <button type="button" class="btn btn-primary btn-block btn-flat" id="login">登陆</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>

            <a href="{% url 'reset' %}">忘记密码</a><br>
            <a href="{% url 'register' %}" class="text-center">注册</a>
        </div>
        <!-- /.login-box-body -->
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugins/layui/css/modules/layer/layer.js' %}"></script>
    <script src="{% static 'box/js/public.js' %}"></script>
    <script>
        $(document).ready(function () {
            generateImageCode();
            get_mac_hmac();
        });

        // 发送图形验证码
        function generateImageCode() {
            var imageCodeId = generateUUID();
            var url = "{% url 'image-code' %}" + "?image_code=" + imageCodeId + "&flag=login";
            $("#image-code").attr("src", url);

        }

        function get_mac_hmac() {
            var url = location.href;
            if (url.indexOf('mac') !== -1) {
                var path = url.split('?')[1];
                var temp1 = path.split('&');
                var mac = temp1[0].split('mac=')[1];
                var hmac = temp1[1].split('mac=')[1];
                $('#mac').val(mac);
                $('#hmac').val(hmac);
            }

        }

        $('#login').click(function () {
            var data = $("#addForm").serialize();
            var csrftoken = Cookies.get('csrftoken');

            $.ajax({
                url: {% url 'login' %},
                type: $('#addForm').attr('method'),
                data: data,
                cache: false,
                headers: {
                    "X-CSRFToken": csrftoken
                },
                success: function (resp) {
                    if (resp.code === 0) {
                        location.href = "/system/route/";
                    } else if (resp.code === 10003 || resp.code === 10005) {
                        let msg = resp.msg;
                        layer.confirm(msg, {
                            icon: 3,
                            title: '提示',
                        }, function (index) {
                            re_checklogin();
                        })
                    } else {
                        layer.alert(resp.msg, {icon: 5});
                        generateImageCode();
                    }
                }
            })


        });

        function re_checklogin() {
            let data = $("#addForm").serialize();
            let csrftoken = Cookies.get('csrftoken');
            $.ajax({
                url: {% url 're_login' %},
                type: $('#addForm').attr('method'),
                data: data,
                cache: false,
                headers: {
                    "X-CSRFToken": csrftoken
                },
                success: function (resp) {
                    if (resp.code === 0) {
                        layer.alert(resp.msg, {icon: 1}, function (index) {
                            parent.layer.closeAll(); // 关闭所有弹窗
                        });
                        location.href = "/system/route/";

                    }

                }
            })
        }

    </script>
{% endblock %}